<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-11-30 20:22:06
 * @LastEditors: Andy
 * @LastEditTime: 2023-01-06 17:14:43
-->
<template>
  <x-dialog
    :title="$t('system.user.resetPassword')"
    :show.sync="isVisible"
    v-if="isVisible"
    :before-close="handleCancel"
    width="35%"
  >
    <el-form
      :model="ruleForm"
      class="demo-form-inline"
      style="border: 1px solid #eeee"
      ref="ruleForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item
        style="margin-top: 20px; margin-right: 20px; margin-left: 20px"
        :label="$t('system.user.newPassword')"
        prop="newPassword"
      >
        <el-input
          v-model="ruleForm.newPassword"
          show-password
          :placeholder="$t('system.user.passwordTxt')"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-right: 20px; margin-left: 20px" :label="$t('system.user.confirm')" prop="checkPass">
        <el-input
          v-model="ruleForm.checkPass"
          :placeholder="$t('system.user.confirmTxt')"
          type="password"
          show-password
        >
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="handleCancel">
        {{ $t('common.cancel') }}
      </el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        {{ $t('common.confirm') }}
      </el-button>
    </span>
  </x-dialog>
</template>
<script>
  import { encrypt, throttle } from '@package/utils'
  import { checkPwd } from '@/common/utils/validate.js'
  import { apiPostResetPwd } from '../api'
  import { EnumApiCode } from '../../../../../../globalEnum'

  export default {
    data() {
      return {
        isVisible: false,
        loading: false,
        ruleForm: {
          newPassword: '',
          checkPass: '',
          userId: ''
        },
        rules: {
          newPassword: [
            { required: true, message: this.$t('system.user.passwordTxt'), trigger: 'blur' },
            { min: 0, max: 20, message: this.$t('system.user.pwdLengthPlaceholder'), trigger: 'blur' },
            { validator: this.validatePwd, trigger: 'blur' }
          ],
          checkPass: [
            { required: true, message: this.$t('system.user.confirm'), trigger: 'blur' },
            { min: 0, max: 20, message: this.$t('system.user.pwdLengthPlaceholder'), trigger: 'blur' },
            { validator: this.validatePwd2, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleOpen(info) {
        this.ruleForm.userId = info.id
        this.isVisible = true
      },
      handleCancel() {
        this.isVisible = false
        this.loading = false
        this.ruleForm = {
          newPassword: '',
          checkPass: '',
          userId: ''
        }
      },
      handleSubmit: throttle(function () {
        this.loading = true
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            const param = {
              userId: this.ruleForm.userId,
              password: encrypt(this.ruleForm.newPassword)
              // newPwd: encrypt(this.ruleForm.checkPass)
            }
            apiPostResetPwd(param).then(
              ({ code, msg }) => {
                this.loading = false
                if (code === EnumApiCode.Success) {
                  this.$refs.ruleForm.resetFields()
                  this.$message.success(this.$t('system.user.resetSuccess'))
                  this.$emit('handleSuccess')
                  this.isVisible = false
                } else {
                  this.$message.error(msg)
                }
              },
              () => {
                this.loading = false
              }
            )
          } else {
            this.loading = false
            return false
          }
        })
      }, 1000),
      validatePwd(rule, value, callback) {
        if (value && value !== '' && !checkPwd(value)) {
          callback(new Error(this.$t('system.user.PasswordMode')))
        } else {
          callback()
        }
      },
      validatePwd2(rule, value, callback) {
        if (value && value !== '' && value !== this.ruleForm.newPassword) {
          callback(new Error(this.$t('system.user.confirPwdTips')))
        } else {
          callback()
        }
      }
    }
  }
</script>
